<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix = "c"  uri = "http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html lang="en-US">
<head>

	<script src="js/jquery.js"></script>
	<script src="js/jCrop/js/jquery.Jcrop.js"></script>
	<script  src="js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="js/jCrop/css/jquery.Jcrop.css" type="text/css" />
	<link rel="stylesheet" href="js/jCrop/css/demos.css" type="text/css" />
	
	<script language="Javascript">

		jQuery(window).load(function(){

			jQuery('#cropbox').Jcrop({
				onChange: showPreview,
				onSelect: showPreview,
				aspectRatio: 1
			});

		});

	
		function showPreview(coords)
		{
			if (parseInt(coords.w) > 0)
			{
				var rx = 100 / coords.w;
				var ry = 100 / coords.h;

				jQuery('#preview').css({
					width: Math.round(rx * 400) + 'px',
					height: Math.round(ry * 750) + 'px',
					marginLeft: '-' + Math.round(rx * coords.x) + 'px',
					marginTop: '-' + Math.round(ry * coords.y) + 'px'
				});
			}
		}

	</script>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<title>凯胜项目管理系统</title>
	<style type="text/css">
		body{
			padding-top:50px;
		}
	</style>
</head>
<body class="body">
	<%@include file="same2.jsp" %>
	
	<div class="container">
		<div class="row">
			<div class="span9">
							<form class="form-horizontal" method="post" action="project.jspx?method=editUser&id=${requestScope.user.id}" enctype = "multipart/form-data">
								<fieldset style="margin-left:70px">
								<legend>个人信息设置</legend>
								<div class="well" >
									<div class="control-group" style="margin-left:70px"  >
										<div style="margin-left:60px;">姓名: <input type="text" name="name" value="${requestScope.user.username }"></div>
									</div>
									<div class="control-group" style="margin-left:70px">
											<input type="hidden" id="pwd" name="pwd" value="${requestScope.user.password}"/>
											<div style="margin-left:50px;">
												<div style="margin:10px;">原密码：<input type="password" class="span4" name="oldpassword" id="oldpassword"/></div>
												<div  style="margin:10px;">新密码：<input type="password" name="password" class="span4" id="input01"/></div>
												<div  style="margin:10px;">新密码确认：<input type="password"  name="word" class="span4" id="input01"/></div>
											</div>
									</div>
									<div class="control-group" style="margin-left:70px;color:black">
									<label class="control-label" for="input01">上传图片设置:</label>
									<div class="controls">
										<c:choose>
											<c:when test="${empty requestScope.user.imgname}">
												<div class="wall" style="border:grey solid 1px;width:100px"><img src="img/4.png" style="margin:5px" /></div>
											</c:when>
											<c:otherwise>
												<div class="wall" style="border:grey solid 1px;width:100px;height:130px;overflow:hidden;">
													<img src="myimg.jspx?path=${requestScope.user.imgname}&id=${requestScope.user.id}" style="width:90px;height:120px;margin-left:5px;margin-top:5px" />
												</div>
											</c:otherwise>
										</c:choose>
										<input type="file" name="file" class="span5" id="input01">
										<input type="button" name="btn" value="点击设置图片显示尺寸" id="mybutton" OnClick="player();"/>
										<!-- 
										<div class="controls" style="margin-left:120px">
											<div  style="border:grey solid 1px;width:100px;height:130px;;overflow:hidden;">
												<img   src="img/5.jpg" style="width:90px;height:120px;margin-left:5px;margin-top:5px;"/>
											</div>
											
											<input type="file" name="file" class="span5" id="input01">
											<input type="button" name="btn" value="点击设置图片显示尺寸" id="mybutton" OnClick="player();"/>
										</div>
										 -->
								</div>
								<c:choose>
									<c:when test="${empty requestScope.user.imgname}">
										<div class="control-group" style="margin-left:70px;display:none" id="myclass">
											<label class="control-label" for="input01">设置个人图片:</label>
											<div class="controls" style="margin-left:70px">
												<table>
													<tr>
														<td>
															<div  style="border:grey solid 1px;width:100px;height:130px;overflow:hidden;margin-top:5px;">
																<img  id="preview" src="img/5.jpg" style="width:90px;height:120px;margin-left:5px;margin-top:5px;"/>
															</div>
														</td>
														<td>	
															<div><img src="img/5.jpg" id="cropbox"  /></div>
														</td>
													</tr>
												</table>
											</div>
										</div>
									</c:when>
									<c:otherwise>
										<div class="control-group" style="margin-left:0px" id="myclass">
											<label class="control-label" for="input01">设置个人图片:</label>
											<div class="controls" style="margin-left:70px">
												<table>
													<tr>
														<td>	
															<div><img src="myimg.jspx?path=${requestScope.user.imgname}" id="cropbox"  /></div>
														</td>
														<td>
															<div  style="border:grey solid 1px;width:100px;height:130px;overflow:hidden;margin-top:5px;">
																<img  id="preview" src="myimg.jspx?path=${requestScope.user.imgname}" style="width:90px;height:120px;margin-left:5px;margin-top:5px;"/>
															</div>
														</td>
														
													</tr>
												</table>
											</div>
										</div>
								  </c:otherwise>
								</c:choose>
							</div>				
									<div class="form-actions" style="margin-left:70px">
										<button type="submit" class="btn btn-primary">保存</button>
										<button class="btn" onclick="location.back()">返回</button>
								  </div>
							  </div>
								</fieldset>
							</form>
			</div>
		</div>
	</div>
	<script type="text/javascript">
			$(document).ready(function(){
				$("#oldpassword").blur(function(){
					var r=$("#oldpassword").attr("value");
					var s=$("#pwd").attr("value");
					if(r!=s){
						$("#oldpassword").html("用户名错误！");
					}
				
				
				
				});
			});
			function player(){
			 var r=document.getElementById("myclass");
			r.style.display="block"; 
			 
		}
			
	</script>
</body>
</html>